<script setup lang="ts">
import { clearInfo } from '@/utils'
import { ElMessageBox } from 'element-plus'
import router from '@/router'
import { useUserStore } from '@/stores/user'
import { calculateDays } from '@/utils/calculate_heat'
import { computed, ref, watch } from 'vue'
import { getUserPlanDaysUtil } from '@/AGC/utils/record'
import { usePlanStore } from '@/stores/plan'

const userStore = useUserStore()
const planStore = usePlanStore()
// 已经坚持天数
const planDays = ref(0)
const getPlanDays = async () => {
  planDays.value = await getUserPlanDaysUtil()
}
watch(
  [planStore.recIngestion, planStore.recConsume],
  () => {
    getPlanDays()
  },
  { immediate: true },
)
// 计划总天数
const totalDays = computed(() => {
  if (userStore.userFilter?.weight && userStore.userFilter?.target_weight) {
    return calculateDays(userStore.userFilter.weight, userStore.userFilter.target_weight)
  }
  return 0
})
// 退出登录
const clickLogout = async () => {
  await ElMessageBox.confirm('您确定要退出吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  await clearInfo()
  // 跳转登录
  router.replace('/login')
}
</script>

<template>
  <div class="nav-bar">
    <!-- breadcrumb -->
    <div style="margin-left: 35%; font-size: 30px; color: rgb(5, 88, 229)">康途定制</div>
    <div style="margin-left: -40%; padding: 5px">
      <div>
        <div style="margin-top: 5px">
          您已坚持&nbsp;<span
            style="color: green; font-weight: bold; font-size: 25px; padding-top: 2px"
            >{{ planDays }}</span
          >&nbsp;天
        </div>
        <div style="margin-left: 12px">
          总共&nbsp;<span
            style="color: red; font-weight: bold; font-size: 25px; padding-top: 2px"
            >{{ totalDays.toFixed(2) }}</span
          >&nbsp;天
        </div>
      </div>
      <!-- <div><span style="color: green">2</span>&nbsp;&nbsp;天！</div> -->
    </div>
    <!-- dropdown -->
    <el-dropdown trigger="click">
      <div class="user-wrapper">{{ userStore.userInfo.nickname || '用户名' }}</div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="clickLogout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style lang="scss" scoped>
.nav-bar {
  height: 70px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px 0 20px;

  .user-wrapper {
    outline: none;
    cursor: default;
    color: var(--el-color-black);
  }
}
</style>
